<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
    </style>
</head>

<body>
    <canvas id="canvas"></canvas>
</body>
<script id="ColorVertexShader" type="x-shader/x-vertex">
    attribute vec4 a_Position;
    uniform float u_PointSize;
    uniform mat4 u_ModelM4;
    uniform mat4 u_PvM4;
    void main(){
        gl_Position = u_PvM4 * u_ModelM4 * a_Position;
        gl_PointSize = u_PointSize;
    }
</script>
<script id="ColorFragmentShader" type="x-shader/x-fragment">
    precision mediump float;
    uniform vec4 u_Color;
    void main(){
        gl_FragColor = u_Color;
    }
</script>
<script type="module">
    import { Matrix4, Vector3, Color, OrthographicCamera, PerspectiveCamera, Spherical } from '../js/three.module.js';
    import { CreateProgram, imgPromise } from '../js/Utils.js';
    import lib from '../js/ThreeLib.js';
    import CameraController from '../js/CameraController.js'
    import Poly from '../js/Poly4.js'

    import Geo from '../js/Poly/Geo.js'
    import Mat from '../js/Poly/Mat.js'
    import Obj3D from '../js/Poly/Obj3D.js'
    import Scene from '../js/Poly/Scene.js'



    //#region gl
    const canvas = document.getElementById("canvas");
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight - 4;

    const gl = canvas.getContext("webgl", { antialias: true, });

    // gl.enable(gl.DEPTH_TEST);//开始背景遮挡会频闪
    gl.enable(gl.BLEND);
    gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
    gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, true);//去图片描边
    //#endregion


    let program = CreateProgram(gl,
        document.querySelector('#ColorVertexShader').innerText,
        document.querySelector('#ColorFragmentShader').innerText);


    const scene = new Scene({ gl: gl });

    const pvM4 = new Matrix4();
    const modelM4 = new Matrix4();


    const elementArr = [
        0, 1, 2,
    ];



    const eye = new Vector3(0, 5, 0);
    const lookAt = new Vector3(0, 0, 0);







    let y = 0;
    let obj01 = createObj([
        -0.1, y, 0,
        0.1, y, 0,
        0, y, 0.2,
    ], elementArr, [1, 0, 0, 1]);
    scene.add(obj01);
    let z1 = 1;
    let obj02 = createObj([
        0, 0, z1,
        0.2, 0, z1,
        0.1, 0.2, z1,
    ], elementArr, [1, 1, 0, 1]);
    scene.add(obj02);

    draw();









    //正交投影矩阵
    function setPvM41(eye, lookAt) {
        const eyem = new Matrix4().setPosition(eye.x, eye.y, eye.z);
        const lookAtm = new Matrix4().lookAt(
            eye, lookAt, new Vector3(0, 1, 0)
        );
        const viewm = (eyem.multiply(lookAtm)).invert();

        const viewH = 1;//设定视图矩阵高度  
        const wh = canvas.width / canvas.height;
        const viewW = viewH * wh;//求视图矩阵宽度  
        const [l, r, t, b, q, h] = [
            -viewH, viewH, viewW, -viewW, 1, 20
        ];
        const projectionm = new Matrix4().makeOrthographic(l, r, t, b, q, h);

        pvM4.copy(projectionm.multiply(viewm));

        console.log(pvM4)
    }
    //透视投影矩阵
    function setPvM42(eye, lookAt) {
        const eyem = new Matrix4().setPosition(eye.x, eye.y, eye.z);
        const lookAtm = new Matrix4().lookAt(
            eye, lookAt, new Vector3(0, 1, 0)
        );
        const viewm = (eyem.multiply(lookAtm)).invert();

        const fov = 45;//开角度数
        const aspnet = canvas.width / canvas.height;//宽高比
        const [n, f] = [1, 20];//近裁剪面的距离 远裁剪面的距离

        const t = Math.tan(fov / 2 * Math.PI / 180) * n;
        const b = -t;
        const r = t * aspnet;
        const l = -r;

        const projectionm = new Matrix4().makePerspective(l, r, t, b, n, f);

        pvM4.copy(projectionm.multiply(viewm));
    }

    function createObj(nodeArr, elementArr, color) {
        return new Obj3D({
            geo: new Geo({
                data: {
                    'a_Position': { size: 3, array: new Float32Array(nodeArr) },
                },
                element: {
                    array: new Uint8Array(elementArr)
                }
            }),
            mat: new Mat({
                program: program,
                mode: ['TRIANGLES'],
                data: {
                    'u_PvM4': { type: 'uniformMatrix4fv', value: pvM4.elements },
                    'u_ModelM4': { type: 'uniformMatrix4fv', value: modelM4.elements },
                    'u_PointSize': { type: 'uniform1f', value: 30 },
                    'u_Color': { type: 'uniform4fv', value: color },
                },
            }),
        });
    }

    function draw() {
        setPvM41(eye, lookAt)
        scene.draw();
    }
</script>

</html>